import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:sexy_tea/common/colors.dart';
import 'package:sexy_tea/components/home/home_swiper.dart';
import 'package:sexy_tea/components/home/home_top_banner.dart';
import 'package:sexy_tea/http/api.dart';
import 'package:sexy_tea/http/result_data.dart';
import 'package:sexy_tea/model/home_grid_model.dart';
import 'package:sexy_tea/widgets/load_image.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<String> items = ['精选', '百货', '女装', '男装', '生鲜', '食品', '电器', '手机'];
  final List<String> swiperList = [
    'https://osscdn.fanbao.cn/pro/2020-12-29/MEMBER_MARKETING_IMG/1609219262696231b372b6080bb8bb5c6cb065a0ab2a8.png',
    'https://osscdn.fanbao.cn/pro/2020-12-29/MEMBER_MARKETING_IMG/1609219605067c97f9966c2cf1bbb442a89236b580fb4.png'
  ];
  List<HomeGridData> _homeGridData;

  @override
  void initState() {
    super.initState();
    _initHomeData();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: items.length,
        child: Scaffold(
            appBar: AppBar(
                title: HomeTopBanner(),
                bottom: PreferredSize(
                    preferredSize: Size.fromHeight(30.0),
                    child: Container(
                      padding: EdgeInsets.all(10.0),
                      child: TabBar(
                        isScrollable: true,
                        indicatorColor: Colors.redAccent,
                        labelColor: Colors.redAccent,
                        labelStyle: TextStyle(
                            fontSize: 14, fontWeight: FontWeight.bold),
                        unselectedLabelColor: Colors.white,
                        indicator: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(10.0)),
                        tabs: items.map((e) => TabsItem(e)).toList(),
                      ),
                    ))),
            body: Container(
              color: Colors.white,
              child: Column(
                children: [
                  HomeSwiper(swiperList),
                  HomeGrid(_homeGridData)
                ],
              ),
            )));
  }

  Widget TabsItem(String text) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 2.0),
      child: Text(text),
    );
  }

  /// 轮播图
  Widget HomeSwiper(List<String> swiperList) {
    return Container(
      height: 140.0,
      child: Swiper(
        key: const Key('home_swiper'),
        itemBuilder: (BuildContext context, int index) {
          return LoadImage(swiperList[index]);
        },
        loop: true,
        autoplay: true,
        autoplayDelay: 5000,
        itemCount: swiperList.length,
      ),
    );
  }

  /// 宫格
  Widget HomeGrid(List<HomeGridData> homeGridData) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
      height: 160.0,
      child: GridView.builder(
          scrollDirection: Axis.horizontal,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 5,
          ),
          itemCount: homeGridData?.length ?? 0,
          itemBuilder: (BuildContext context, index) =>
              HomeGridItem(homeGridData[index])),
    );
  }

  Widget HomeGridItem(HomeGridData homeGridData) {
    return Container(
      child: Column(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.circular(50),
            child: Image.network(homeGridData.img, width: 36, height: 36, fit: BoxFit.cover,),
            // ,
          ),
          Text(
            homeGridData.title,
            style: TextStyle(fontSize: 12, color: TColors.text),
          )
        ],
      ),
    );
  }

  Future<void> _initHomeData() async {
    print('object');
    ResultData res = await Api.getHomeGrid();
    HomeGridModel homeGridModel = HomeGridModel().fromJson(res.data);
    if (res.isSuccess) {
      setState(() {
        _homeGridData = homeGridModel.data;
      });
    }
  }
}
